μ½ν μΈ μ€λ²λ μ΄λ₯Ό ν΅ν μ¬μ©μ κ²½ν ν₯μμ μν λ¬Έμ Picture-in-Picture APIμ κ°λ ₯ν κΈ°λ₯μ μ΄ν΄λ³΄μΈμ. κΈ°λ₯, ꡬν λ° λͺ¨λ² μ¬λ‘λ₯Ό μμ보μΈμ.
λ¬Έμ Picture-in-Picture: μ½ν μΈ μ€λ²λ μ΄ μ¬μΈ΅ λΆμ
λ¬Έμ Picture-in-Picture APIλ κ°λ°μκ° λ€λ₯Έ νκ³Ό μ ν리μΌμ΄μ μ κ±Έμ³ μ§μλλ νλ‘ν λΉλμ€ μ°½μ λ§λ€ μ μλ κ°λ ₯ν μΉ APIμ λλ€. λ¨μν λΉλμ€ μ¬μμ λμ΄ λΉλμ€ μμ μ¬μ©μ μ§μ μ½ν μΈ μ λνν μμλ₯Ό μ€λ²λ μ΄νλ κΈ°λ₯μ μ 곡ν©λλ€. μ΄λ μ¬μ©μ κ²½νμ ν₯μμν€κ³ λ§€λ ₯μ μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆν μ μλ κ΄λ²μν κ°λ₯μ±μ μ΄μ΄μ€λλ€.
λ¬Έμ Picture-in-Pictureλ 무μμΈκ°μ?
μ ν΅μ μΌλ‘ Picture-in-Picture(PiP)λ μ£Όλ‘ λΉλμ€ μ¬μμ μ¬μ©λμμ΅λλ€. λ¬Έμ Picture-in-Picture APIλ κΈ°λ³Έ λ¬Έμμ λΆλ¦¬λ μμ ν μλ‘μ΄ μ°½μ λ§λ€ μ μλλ‘ νμ¬ μ΄ κΈ°λ₯μ νμ₯νλ©°, μ΄ μ°½μμ λͺ¨λ HTML μ½ν μΈ λ₯Ό λ λλ§ν μ μμ΅λλ€. μ΄ μ½ν μΈ μλ λΉλμ€, μ΄λ―Έμ§, ν μ€νΈ, λνν 컨νΈλ‘€ λ° μ 체 μΉ μ ν리μΌμ΄μ μ΄ ν¬ν¨λ μ μμ΅λλ€.
λ€λ₯Έ μ ν리μΌμ΄μ μμ λ μλ λ―Έλ λΈλΌμ°μ μ°½μ΄λΌκ³ μκ°νλ©΄ λ©λλ€. μ΄λ μ¬μ©μκ° λ€λ₯Έ μμ μ μννλ λμ μ§μμ μΌλ‘ μ 보λ₯Ό λͺ¨λν°λ§νκ±°λ νΉμ 컨νΈλ‘€ μ§ν©κ³Ό μνΈ μμ©ν΄μΌ νλ μλ리μ€μ νΉν μ μ©ν©λλ€.
μ£Όμ κΈ°λ₯ λ° μ΄μ
- μ¬μ©μ μ§μ μ½ν μΈ : λΉλμ€λΏλ§ μλλΌ PiP μ°½ λ΄μμ λͺ¨λ HTML μ½ν μΈ λ₯Ό λ λλ§ν©λλ€.
- λνν μμ: μ¬μ©μ μνΈ μμ©μ νμ±ννκΈ° μν΄ λ²νΌ, μμ λ° κΈ°ν λνν 컨νΈλ‘€μ ν¬ν¨ν©λλ€.
- μ§μμ μΈ μ°½: κΈ°λ³Έ λ¬Έμκ° λ«νκ±°λ νμνλλΌλ PiP μ°½μ΄ κ³μ νμλ©λλ€.
- κ°μ λ μ¬μ©μ κ²½ν: μ¬μ©μκ° μ€μν μ 보λ 컨νΈλ‘€μ μ‘μΈμ€ν μ μλ μννκ³ νΈλ¦¬ν λ°©λ²μ μ 곡ν©λλ€.
- ν₯μλ λ©ν°νμ€νΉ: μ¬μ©μκ° PiP μ°½μ λμμ λͺ¨λν°λ§νκ±°λ μνΈ μμ©νλ©΄μ λ€λ₯Έ μμ μ μνν μ μλλ‘ ν©λλ€.
μ¬μ© μ¬λ‘ λ° μμ
1. νμ νμ λ° νμ
μ°Έκ°μλ€μ λΉλμ€ νΌλλ₯Ό λ μμ μ°½μ νμνκΈ° μν΄ λ¬Έμ Picture-in-Pictureλ₯Ό μ¬μ©νλ νμ νμ μ ν리μΌμ΄μ μ μμν΄ λ³΄μΈμ. μ΄λ₯Ό ν΅ν΄ μ¬μ©μλ λ€λ₯Έ λ¬Έμλ μ ν리μΌμ΄μ μ νμνλ λμ κ³μ νμ ν μ μμ΅λλ€. λ³λμ νλ μ ν μ΄μ , λ¬Έμ λλ μ€νλ λμνΈλ₯Ό μμ νλ λμ λλ£λ₯Ό λ³΄κ³ λ€μ μ μμ΅λλ€.
μμ: μΌλ³Έμ νλ‘μ νΈ κ΄λ¦¬μλ λ―Έκ΅μμ μ§ν μ€μΈ νμλ₯Ό λͺ¨λν°λ§νλ©΄μ λμμ νλ‘μ νΈ κ³νμ κ²ν νλ λ° μ΄λ₯Ό μ¬μ©ν μ μμ΅λλ€.
2. λ―Έλμ΄ λͺ¨λν°λ§ λ° μ€νΈλ¦¬λ°
λ΄μ€ μμ΄μ μ λ° λ―Έλμ΄ μ‘°μ§μ λ¬Έμ Picture-in-Pictureλ₯Ό νμ©νμ¬ μ€μκ° λ΄μ€ νΌλ, μ£Όμ μμΈ νμ λλ μμ λ―Έλμ΄ μ λ°μ΄νΈλ₯Ό νμνλ νλ‘ν μ°½μ μ¬μ©μμκ² μ 곡ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μλ νμ΄λ μ ν리μΌμ΄μ μ κ³μ μ νν νμ μμ΄ μ 보λ₯Ό μ»μ μ μμ΅λλ€.
μμ: λ°λμ κΈμ΅ λΆμκ°λ μμ₯ λ³΄κ³ μλ₯Ό μμ±νλ©΄μ PiP μ°½μμ μ£Όκ°λ₯Ό μΆμ ν μ μμ΅λλ€.
3. κ²μ λ° κ²μ μ€νΈλ¦¬λ°
κ²μ κ°λ°μλ λ¬Έμ Picture-in-Pictureλ₯Ό μ¬μ©νμ¬ κ²μ ν΅κ³, μ±ν μ°½ λλ μ μ΄νμ νλ‘ν μ°½μ νμν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ κ²μ΄λ¨Έλ κ²μ νλ μ΄λ₯Ό μ€λ¨νμ§ μκ³ λ μ€μν μ 보λ 컨νΈλ‘€μ μ½κ² μ‘μΈμ€ν μ μμ΅λλ€.
μμ: νκ΅μ νλ‘ κ²μ΄λ¨Έλ κ²μμ νλ©΄μ PiPλ‘ μ€νΈλ¦¬λ° μ€λ²λ μ΄μ μ±ν μ°½μ νμν μ μμ΅λλ€.
4. μμ°μ± λ° μμ κ΄λ¦¬
μμ κ΄λ¦¬ μ ν리μΌμ΄μ μ λ¬Έμ Picture-in-Pictureλ₯Ό μ¬μ©νμ¬ νλ‘ν μ°½μ μμ λͺ©λ‘, 미리 μλ¦Ό λλ λ§κ°μΌμ νμν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μλ μ°μ μμμ μ§μ€νκ³ μ 리λ μνλ₯Ό μ μ§ν μ μμ΅λλ€.
μμ: λΈλΌμ§μ μ격 근무μλ λ€μν νλ‘μ νΈλ₯Ό μ§ννλ©΄μ PiPλ‘ μΌμΌ μμ λͺ©λ‘μ μ μ§ν μ μμ΅λλ€.
5. E-λ¬λ λ° μ¨λΌμΈ κ°μ’
μ¨λΌμΈ νμ΅ νλ«νΌμ λ¬Έμ Picture-in-Pictureλ₯Ό μ¬μ©νμ¬ νλ‘ν μ°½μ κ°μ’ μλ£, λ©λͺ¨ λλ μ§νλ₯ μΆμ κΈ°λ₯Ό νμν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ νμλ€μ λ€λ₯Έ μΉμ¬μ΄νΈλ μ ν리μΌμ΄μ μ νμνλ λμ κ³μ νμ΅ν μ μμ΅λλ€.
μμ: μΈλμ νμμ λ³λμ λ¬Έμμ λ©λͺ¨λ₯Ό μμ±νλ©΄μ PiPλ‘ κ°μλ₯Ό μμ²ν μ μμ΅λλ€.
λ¬Έμ Picture-in-Picture ꡬν
JavaScriptλ₯Ό μ¬μ©νμ¬ λ¬Έμ Picture-in-Pictureλ₯Ό ꡬννλ λ°©λ²μ λν κΈ°λ³Έμ μΈ κ°μλ λ€μκ³Ό κ°μ΅λλ€.
- λΈλΌμ°μ μ§μ νμΈ: λΈλΌμ°μ κ° λ¬Έμ Picture-in-Picture APIλ₯Ό μ§μνλμ§ νμΈν©λλ€.
- λ²νΌ λλ νΈλ¦¬κ±° μμ±: PiP κΈ°λ₯μ νΈλ¦¬κ±°ν λ²νΌ λλ κΈ°ν μμλ₯Ό μΉ νμ΄μ§μ μΆκ°ν©λλ€.
- PiP μ°½ μ΄κΈ°:
documentPictureInPicture.requestWindow()λ©μλλ₯Ό μ¬μ©νμ¬ μ PiP μ°½μ μ½λλ€. - PiP μ°½ μ±μ°κΈ°: JavaScriptλ₯Ό μ¬μ©νμ¬ PiP μ°½μ HTML μ½ν μΈ λ₯Ό λμ μΌλ‘ μμ±νκ³ μΆκ°ν©λλ€.
- μ΄λ²€νΈ μ²λ¦¬: PiP μ°½μ κ΄λ¦¬νκΈ° μν΄
resizeλ°closeμ κ°μ μ΄λ²€νΈλ₯Ό μμ ν©λλ€.
μ½λ μμ
μ΄ μμ λ λ¬Έμ Picture-in-Pictureμ κ°λ¨ν ꡬνμ 보μ¬μ€λλ€.
// λΈλΌμ°μ μ§μ νμΈ
if ("documentPictureInPicture" in window) {
const pipButton = document.getElementById('pipButton');
const video = document.getElementById('myVideo');
pipButton.addEventListener('click', async () => {
try {
// PiP μ°½ μ΄κΈ°
const pipWindow = await documentPictureInPicture.requestWindow();
// PiP μ°½ μ½ν
μΈ μ±μ°κΈ°
pipWindow.document.body.innerHTML = `
<video src="${video.src}" controls autoplay muted></video>
<p>Picture-in-Pictureλ‘ μ¬μ μ€!</p>
`;
// μ°½ λ«κΈ°μ λν μ΄λ²€νΈ 리μ€λ μΆκ°
pipWindow.addEventListener('unload', () => {
console.log('PiP μ°½μ΄ λ«νμ΅λλ€.');
});
} catch (error) {
console.error('Picture-in-Picture μ°½ μ΄κΈ° μ€λ₯:', error);
}
});
} else {
console.log('μ΄ λΈλΌμ°μ μμλ λ¬Έμ Picture-in-Pictureλ₯Ό μ§μνμ§ μμ΅λλ€.');
}
μ€λͺ :
- μ½λλ λ¨Όμ
documentPictureInPictureAPIκ° λΈλΌμ°μ μμ μ§μλλμ§ νμΈν©λλ€. - κ·Έλ° λ€μ PiPλ₯Ό νΈλ¦¬κ±°ν λ²νΌκ³Ό λΉλμ€ μμμ λν μ°Έμ‘°λ₯Ό κ°μ Έμ΅λλ€.
- λ²νΌμ μ΄λ²€νΈ 리μ€λκ° μΆκ°λ©λλ€. ν΄λ¦νλ©΄
documentPictureInPicture.requestWindow()λ₯Ό νΈμΆνμ¬ μ PiP μ°½μ μ½λλ€. - κ·Έλ° λ€μ PiP μ°½μ
document.bodyμ μλinnerHTMLμμ±μ΄ λΉλμ€ μμμ ν μ€νΈ λ¨λ½μ ν¬ν¨νλλ‘ μ€μ λ©λλ€. ν νλ¦Ώ 리ν°λ΄μ μ¬μ©ν λΉλμ€ src μμ± μ΄μ€μΌμ΄νμ μ μνμΈμ. - PiP μ°½μ μ΄λ²€νΈ 리μ€λκ° μΆκ°λμ΄ λ«ν λ λ©μμ§λ₯Ό κΈ°λ‘ν©λλ€.
- PiP μ΄κΈ° νλ‘μΈμ€ μ€μ λ°μν μ μλ μ μ¬μ μΈ μμΈλ₯Ό ν¬μ°©νκΈ° μν΄ μ€λ₯ μ²λ¦¬κ° ν¬ν¨λ©λλ€.
λͺ¨λ² μ¬λ‘ λ° κ³ λ € μ¬ν
- μ¬μ©μ κ²½ν: PiP μ°½μ λͺ ννκ³ μ§κ΄μ μΈ μ¬μ©μ μΈν°νμ΄μ€λ‘ λμμΈν©λλ€. μ½ν μΈ κ° μ½κ² μ½μ μ μκ³ μ‘μΈμ€ν μ μλμ§ νμΈν©λλ€.
- μ±λ₯: PiP μ°½ λ΄μ μ½ν μΈ λ₯Ό μ΅μ ννμ¬ λ¦¬μμ€ μ¬μ©μ μ΅μννκ³ μνν μ±λ₯μ 보μ₯ν©λλ€. λΆνμν μ λλ©μ΄μ μ΄λ 볡μ‘ν λ λλ§μ νΌν©λλ€.
- μ κ·Όμ±: PiP μ°½μ΄ μ₯μ κ° μλ μ¬μ©μμκ² μ‘μΈμ€ κ°λ₯νμ§ νμΈν©λλ€. μ΄λ―Έμ§μ λν λ체 ν μ€νΈ, λΉλμ€μ λν μλ§ λ° ν€λ³΄λ νμμ μ 곡ν©λλ€.
- 보μ: PiP μ°½μ νμλλ μ¬μ©μ μμ± μ½ν μΈ λ₯Ό μ 리νμ¬ μ¬μ΄νΈ κ° μ€ν¬λ¦½ν (XSS) 곡격μ λ°©μ§ν©λλ€.
- λΈλΌμ°μ νΈνμ±: λ€λ₯Έ λΈλΌμ°μ μμ ꡬνμ ν μ€νΈνμ¬ νΈνμ±μ 보μ₯ν©λλ€. μ΄μ λΈλΌμ°μ μ λν μ§μμ μ 곡νκΈ° μν΄ ν΄λ¦¬ν λλ μΌμ μ¬μ©νλ κ²μ κ³ λ €ν©λλ€.
- κΆν: μ¬μ©μ κ°μΈ μ 보λ₯Ό μ‘΄μ€νμΈμ. νμν 리μμ€μ λν μ‘μΈμ€λ§ μμ²νκ³ κ·Έ μ΄μ λ₯Ό λͺ ννκ² μ€λͺ νμΈμ.
- μ°½ ν¬κΈ° λ° μμΉ: μ¬μ©μκ° PiP μ°½μ ν¬κΈ°μ μμΉλ₯Ό μ¬μ©μ μ§μ νλλ‘ νμ©ν©λλ€. νλ©΄μ λ€λ₯Έ μμμ μ°½μ κ³ μ νλ μ΅μ μ μ 곡νλ κ²μ κ³ λ €ν©λλ€.
λΈλΌμ°μ μ§μ
λ¬Έμ Picture-in-Pictureλ νμ¬ Google Chrome λ° Microsoft Edgeμ κ°μ Chromium κΈ°λ° λΈλΌμ°μ μμ μ§μλ©λλ€. λ€λ₯Έ λΈλΌμ°μ μ μ§μμ λ€λ₯Ό μ μμ΅λλ€.
λΈλΌμ°μ νΈνμ±μ λν μ΅μ μ 보λ₯Ό λ³΄λ €λ©΄ νμ Can I use μΉμ¬μ΄νΈλ₯Ό νμΈνμμμ€.
ν₯ν κ°λ°
λ¬Έμ Picture-in-Picture APIλ μμ§ μ§ν μ€μ΄λ©° ν₯ν κ°λ°μλ λ€μμ΄ ν¬ν¨λ μ μμ΅λλ€.
- κ°μ λ μ΄λ²€νΈ μ²λ¦¬: PiP μ°½μ λν λ μΈλΆνλ μ μ΄λ₯Ό νμ©νλ λ³΄λ€ κ°λ ₯ν μ΄λ²€νΈ μ²λ¦¬ κΈ°λ₯μ λλ€.
- ν₯μλ μ€νμΌλ§ μ΅μ : CSSλ₯Ό μ¬μ©νμ¬ PiP μ°½μ μ€νμΌλ§νλ λ ν° μ μ°μ±μ λλ€.
- λ€λ₯Έ APIμμ ν΅ν©: Web Share API λ° Notifications APIμ κ°μ λ€λ₯Έ μΉ APIμμ μνν ν΅ν©μ λλ€.
κ²°λ‘
λ¬Έμ Picture-in-Picture APIλ μΉ κ°λ°μ νλλ₯Ό λ°κΎΈλ νμ μΌλ‘, μ¬μ©μ κ²½νμ ν₯μμν€κ³ λ§€λ ₯μ μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆν μ μλ κ°λ ₯ν λ°©λ²μ μ 곡ν©λλ€. ν΄λΉ κΈ°λ₯μ νμ©ν¨μΌλ‘μ¨ κ°λ°μλ μ¬μ©μ μ§μ μ½ν μΈ λ₯Ό νμνκ³ λνν 컨νΈλ‘€μ μ 곡νλ©° λ©ν°νμ€νΉ κΈ°λ₯μ κ°μ νλ νλ‘ν μ°½μ λ§λ€ μ μμ΅λλ€. APIκ° κ³μ λ°μ νκ³ λ λμ λΈλΌμ°μ μ§μμ μ»μμ λ°λΌ μ΅μ νμ μ μΈ μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° νμμ μΈ λκ΅¬κ° λ κ²μ λλ€.
μ΄ κ°μ΄λμ μ€λͺ λ κΈ°λ₯, ꡬν μΈλΆ μ 보 λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ κ°λ°μλ λ¬Έμ Picture-in-Pictureμ μ μ¬λ ₯μ μ΅λν νμ©νκ³ μ μΈκ³ μ¬μ©μλ₯Ό μν μ§μ ν λ°μ΄λ μ¬μ©μ κ²½νμ λ§λ€ μ μμ΅λλ€.